/* eslint-disable no-unused-vars */
import React, { Component } from 'react';
import ReactEcharts from 'echarts-for-react';
import { Tabs } from 'antd';
import styles from '../style/index.less';

const { TabPane } = Tabs;

export default class TabEchart extends Component {

  state = {
    tabKey: 'complain',
  }

  // echarts项配置
  echartsConfig = {
    complainAdvisory: {
      title: '用户投诉咨询',
      options: ['年', '月'],
      color: '#A39FE3',
      kind: {
        complain: '投诉',
        advisory: '咨询'
      }
    }
  }

  // 切换tab
  tabChange = (key) => {
    this.setState({ tabKey: key })
  }


  // 生成Tab切换组件
  getTabs = () => {
    const { tabKey } = this.state;
    const { echartsModule } = this.props;
    const ele = echartsModule[0];
    const { name, data } = echartsModule[0];
    const seriesData = data.filter(x => x.name === tabKey)[0].data;
    const { kind, title, color } = this.echartsConfig[name];
    // 生成默认时间轴
    const year = new Date().getFullYear();
    const xAxisData = [];
    for (let i = 1; i <= 12; i++) {
      xAxisData.push(`${year}年${i >= 10 ? i : '0' + i}月`);
    }
    const option = {
      xAxis: {
        type: 'category',
        data: xAxisData
      },
      yAxis: {
        type: 'value'
      },
      tooltip: {
        trigger: 'axis',
        formatter: '{a} <br/>{b} : {c}个',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        top: '9%',
        bottom: '10%',
        right: '5%',
        left: '9%'
      },
      series: [{
        name: kind[tabKey],
        color,
        data: seriesData,
        type: 'bar',
      }]
    };
    return (
      <div className={styles.echarts_main} style={{ height: '300px', overflow: 'hidden' }}>
        <Tabs defaultActiveKey="complain" onChange={this.tabChange}>
          {data.map(ele => {
            return (
              <TabPane tab={kind[ele.name]} key={ele.name}>
                <div style={{ width: '100%', height: '300px' }}>
                  <ReactEcharts
                    style={{ height: 230 }}
                    option={option}
                  />
                </div>
              </TabPane>
            )
          })}
        </Tabs>
      </div>
    )
  }

  render() {
    return (
      <>
        {this.getTabs()}
      </>
    )
  }
}
